<template>
  <div class="slide-select-root">
    <VMask v-show="isShow" @click="onClose" />
    <transition name="up">
      <div v-if="isShow" class="slide-select">
        <BtnsBar :btns="btns" />
        <SlideSelectBase ref="vSlideSelectBase" />
      </div>
    </transition>
  </div>
</template>

<script>
import MixinSlideSelect from './MixinSlideSelect.js'
export default {
  mixins: [MixinSlideSelect]
}
</script>

<style scoped>
.slide-select-root {
  font-size: 100px;
}
.slide-select {
  background-color: #fff;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9;
}
.up-enter-active,
.up-leave-active {
  transition: 0.2s;
  transition-property: transform;
}
.up-enter,
.up-leave-to {
  transform: translate3d(0, 99%, 0);
}
</style>
